Skip to main content

封装的例子 1

[TOC]

main.js 引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant';
import { Lazyload } from 'vant';
import 'vant/lib/index.css';
import {get, post} from '@/utils/http.js';
import VueClipboard from 'vue-clipboard2'

Vue.config.productionTip = false

Vue.use(Vant);
Vue.use(Lazyload);
Vue.use(VueClipboard)

Vue.prototype.$post = post;
Vue.prototype.$get = get;

new Vue({
router,
render: h => h(App)
}).$mount('#app')

src/utils/http.js

import axios from 'axios';
import router from '../router'
import {
Toast
} from 'vant';

axios.defaults.timeout = 5000;
axios.defaults.baseURL = '';

//http request 拦截器
axios.interceptors.request.use(
config => {
if (!config.params.hideLoading) {
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0
});
}
config.headers = {
'Content-Type': 'application/json'
}
return config;
},
error => {
return Promise.reject(err);
}
);

//http response 拦截器
axios.interceptors.response.use(
response => {
Toast.clear();
const data = response.data;
return data;
},
error => {
Toast.clear();
const status = error.response.status;
if (status == 401) {
const current = router.currentRoute.fullPath;
if (current != '/login') {
router.push(`/login?redirect=${current}`)
}
} else if (status == 500) {
Toast.fail('服务器异常');
} else if (status != 200) {
Toast.fail('请检查请求是否正确');
}
return Promise.reject(error)
}
)

/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/

export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response);
})
.catch(err => {
reject(err)
})
})
}


/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/

export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response);
}, err => {
reject(err)
})
})
}

请求的一个例子

<template>
<div class="detail">
<template v-if="detail">
<van-sticky>
<van-icon name="arrow-left" class="back" @click="back" />
<video
:id="detail.data.id"
controls
preload="none"
:poster="detail.data.cover.feed"
:src="detail.data.playUrl"
></video>
</van-sticky>
<div class="content">
<p class="detail-title">{{ detail.data.title }}</p>
<p class="detail-author-name">
{{
detail.data.author != null
? detail.data.author.name
: (detail.data.owner ? detail.data.owner.nickname : '') +
' / #' +
detail.data.category
}}
</p>
<p class="detail-description">{{ detail.data.description }}</p>
<div class="detail-operation">
<div class="operation-item">
<van-icon name="like" />
<span class="count">{{
detail.data.consumption.collectionCount
}}</span>
</div>
<div class="operation-item" @click="shareUrl(detail)">
<van-icon name="share" />
<span class="count">{{ detail.data.consumption.shareCount }}</span>
</div>
<div class="operation-item" @click="download(detail)">
<van-icon name="down" />
<span class="count">下载</span>
</div>
<div class="operation-item">
<van-icon name="star" />
<span class="count">{{
detail.data.consumption.realCollectionCount
}}</span>
</div>
</div>
</div>
<moment :list="relatedList" />
<moment :list="replies" />
</template>
</div>
</template>

<script>
import { getUrl } from '../utils/common.js'
import { Toast } from 'vant'
import moment from '../components/Moment.vue'

export default {
data() {
return {
detail: null,
relatedList: [],
replies: [],
}
},
components: {
moment,
},
methods: {
init() {
const detail = localStorage.getItem('detail')
if (detail) {
this.detail = JSON.parse(detail)
this.getRelated()
this.getReplies()
}
},
back() {
this.$router.push('/')
},
shareUrl(content) {
this.$copyText(content.data.playUrl).then(
e => {
Toast.success('已复制')
},
e => {
Toast.fail('复制异常')
}
)
},
download(content) {
window.open(content.data.playUrl, '_blank')
},
getRelated() {
this.$get(getUrl('/api/v4/video/related?id=' + this.detail.data.id), {
hideLoading: true,
}).then(data => {
this.relatedList = data.itemList
})
},
getReplies() {
this.$get(
getUrl('/api/v2/replies/video?videoId=' + this.detail.data.id),
{ hideLoading: true }
).then(data => {
this.replies = data.itemList
})
},
},
watch: {
$route(to, from) {
this.init()
},
},
mounted() {
this.init()
},
}
</script>